// 抽象可复用逻辑
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
export function useObserver (apiFn) {
  // *************** 组件懒加载 ***************
  // 基础使用  监听视口函数
  const target = ref(null)
  // 调用方法
  // 1. stop 可执行的方法 用来停止对于目标元素的监听
  // 2. target 要坚挺的一个对象 dom对象 组件实例对象
  // 3. isIntersecting 布尔值 代表当前监听的元素对象是否进入到史口区域 进来就为true 出去就是false
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }], observerElement) => {
      // isIntersecting
      // 可以使用isIntersecting变量的是否为true来控制ajax请求是否要发起
      console.log(isIntersecting)
      if (isIntersecting) {
        apiFn()
        // 第一次请求成功发起后立刻停止监听
        stop()
      }
    },
    {
      // 用来控制目标target进入视口区域的比例
      // 0 - 1 数值越大要求进入到视口区域的面积越大 才会触发回调
      //       数值越小要求进入到视口区域的面积越小 才会触发回调
      shreshold: 0.1
    }
  )
  return {
    target
  }
}

// 所谓的逻辑复用其实就是找到重复代码的地方  在找到可变的地方  把可变的东西抽象成一个参数
// setup 函数组合的永远是响应式的状态数据
